<template>
  <div class="qt_detail">
      <h4>运输员列表>运输员详情</h4>
      <div class="container" style="padding:0;">
          <div class="baseInfo">
               <h4>基础信息</h4>
               <div style="overflow:hidden">

               </div>
                <div class="info" >
                    <div>真实姓名：{{trans_info.realName}}</div> 
                    <div>联系方式：{{trans_info.tel}}</div>   
                    <!-- <div>所属区域：省市区-江苏**盱眙</div>   -->
                    <div>状态：{{trans_info.isDeleted == 1? '不可用' :'可用'}}</div>
                    <div>密码：
                        <span v-if="flag==0">{{flag==0?trans_info.identiCode:againMima}}</span>
                        <el-input v-model="againMima" placeholder="请输入密码" style='display:inline-block;width:150px;' v-if="flag==1"></el-input>
                    </div>
                    <div >
                        <span @click="reMima" v-if="flag==0" class="reMina">重置密码</span>
                        <span v-if="flag==1" @click="save" style="margin-left:-175px;" class="reMina">保存</span>
                    </div>
                     
                </div>
                <div>
                   <!-- <div class="demo-input-suffix" style=" margin-left:30px;display:inline-block;">
                            涉及城市：
                            <el-select v-model="value" placeholder="请选择省" style="margin-right:20px;">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                            <el-select v-model="value" placeholder="请选择市">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select> 
                   </div> -->
                   <!-- <div class="editor">编辑</div> -->
                </div>
                
          </div>
          <!-- 配送统计 -->
          <div class="order_count">
              <h4>配送统计</h4>
              <div class="box">
                 <div class="title" >
                     <el-date-picker
                            v-model="dateVal"
                            type="month"
                            placeholder="选择年月"
                            value-format="yyyy-MM">
                    </el-date-picker>
                   <!-- <el-button type="primary" size="mini" @click="searchOrder()">搜索</el-button> -->
                   <div class="right" style="float:right;font-size:14px;">
                       <span >运输订单：{{countOrderNum}}笔</span>
                       <span style="margin-left:100px;">处理龙虾：{{countRealWeight}}斤</span>
                       <span style="margin-left:100px;">实际重量：{{countRealWeight}}斤</span>
                   </div>
                 </div>
                 <el-table  :data="tableOrder" border  style="width: 100%" :header-cell-style="rowClass">
                    <el-table-column type="index"  width="80" label="序号" align="center"></el-table-column>
                    <el-table-column
                        prop="orderId"
                        label="订单编号"
                        width="180" align="center">
                    </el-table-column>
                    <el-table-column
                        prop="buyAmount"
                        label="订单总量"
                        width="180" align="center">
                    </el-table-column>
                    <el-table-column
                        prop="realWeight"
                        label="实际质量" align="center">
                    </el-table-column>
                     <el-table-column
                        prop="receiveTime"
                        label="送达时间" align="center">
                     </el-table-column>
                 </el-table>
                 
              </div>
          </div>
         
      </div>
  </div>
</template>

<script>
import { trans_detail,trans_order,trans_reMima } from '@/request/api.js'
export default {
    data(){
      return {
          trans_id:'',
          trans_info:{},
          dateVal: '',
          tableOrder: [{
                    orderNum:'20180101000001',
                    orderCount:'3箱',
                    quality:'87斤',
                    time:'2018-07-03  12:33:33',
                    result:'合格'
                    }, {
                     orderNum:'20180101000001',
                    orderCount:'3箱',
                    quality:'87斤',
                    time:'2018-07-03  12:33:33',
                    result:'合格'
                    }, {
                     orderNum:'20180101000001',
                    orderCount:'3箱',
                    quality:'87斤',
                    time:'2018-07-03  12:33:33',
                    result:'合格'
                    }, {
                   orderNum:'20180101000001',
                    orderCount:'3箱',
                    quality:'87斤',
                    time:'2018-07-03  12:33:33',
                    result:'合格'
          }],
          countCaseNum:'',  // 处理龙虾箱
          countOrderNum:'',  // 运输订单
          countRealWeight:'', // 实际质量
          flag:0,//是否显示密码,
          againMima:'',//密码
      }
    },
    mounted(){
    
       this.get_trans_order();
    },
    created(){
       this.trans_id = this.$route.params.id;
       this.get_trans_detail();
       var date =  new Date;
       var year=date.getFullYear(); 
       var month= date.getMonth()+1;
       if(month<10) {
            month = '0' + month
       }
       this.dateVal = year + '-' + month;    
    },
    methods:{
      rowClass({ row, rowIndex}) {
            console.log(rowIndex) //表头行标号为0
            return 'background:#ebeef5'
       },
       get_trans_detail(){
           trans_detail({
             id:this.trans_id
           }).then(res=> {
               console.log(2,res);
               this.trans_info = res.data;
           })
       },
       get_trans_order(){
           trans_order({
               id:this.trans_id,
               date:this.dateVal,
               pageNum:1,
               pageSize:10
           }).then(res=> {
            //    console.log(2,res);
               this.countCaseNum = res.countCaseNum; // 处理龙虾
               this.countOrderNum = res.countOrderNum ; // 运输订单 
               this.countRealWeight = res.countRealWeight; // 实际质量
               this.tableOrder = res.transUserOrderList.rows;
           })
       } ,
       searchOrder(){
           this.get_trans_order();
           
       },
       //  点击重置密码  
       reMima(){
           this.flag=1;
           this.againMima=this.trans_info.identiCode
       },
       //点击保存 
       save(){
        this.flag=0;
        trans_reMima({
          id:this.$route.params.id,
          newPassword:this.againMima
        }).then(res=>{
            if(res.code == 1){
              this.$message.success('修改成功');
              this.get_trans_detail();
            }
        })
       }   
    }

 }
</script>
<style  scoped>
.qt_detail > h4 {
    line-height: 22px;
    border-left: 5px solid rgb(32, 160, 255);
    font-size:16px;
    color: #666;
    padding-left:  10px;
    font-size:18px;
    margin-bottom:20px;
}
.container {
    line-height:50px;
    border-radius: 0;
}
.container h4 {
    background-color: #eee;
    line-height: 50px;
    font-weight: 400;
    font-size:16px;
    padding-left:30px;
    color: #999;

}
.container .info {
    display: flex;
    padding: 0  30px;
    
}
.container .info  div {
    margin-right:100px;
}
.order_count .box, .approve_count .box {
    padding: 10px  30px;
}
.reMina{
 color:blue;
}
.editor{
    display:inline-block;
    color:blue;
    margin-left:20px;
}
</style>